import React from 'react';
import { 
  StyleSheet,
  FlatList,
  Text,
  Image,
  View,
  DeviceEventEmitter
} from 'react-native';
import { inject, observer } from 'mobx-react';

class ListItem extends React.Component {
    render(){
        const data = this.props.data;
        return (
           <View style={styles.item}>
                <Text><Text style={[styles.c1,styles.label]}>收益</Text><Text style={styles.c2}>{data.num} NSS</Text></Text>
                <View style={styles.timeBox}><Text style={styles.c1}>{data.day}</Text></View>
           </View>
        )
        
    }
}
@inject((stores) => {
    return {
      hatchStore: stores.rootStore.hatchStore
    }
  })
@observer class ProfitRecordScreen extends React.Component {
    static navigationOptions = {
        title:'收益记录',
        headerBackTitle: '返回',
        
    };
    constructor(props){
		super(props);
        this.state = {
            id: '0'
        }
	}
    componentDidMount = () => {
        const id = this.props.navigation.state.params.id;
        this.props.hatchStore.getProfitLog({id: id});
        this.setState({id: id})
    };
    componentWillUnmount(){
        DeviceEventEmitter.emit('Hatch', {id: 1});
    }
    /**
     * 下拉加载更多
     */
    _onEndReached = () =>{
        let currentPage = 1,lastPage = 1;
        currentPage = this.props.hatchStore.profitCurrentPage;
        lastPage = this.props.hatchStore.profitLastPage;
        if(currentPage >= lastPage){
            return;
        }else {
            this.props.hatchStore.getProfitLog({id: this.state.id,page: (parseInt(currentPage) + 1)});
        }
    }
    render() {
        return (
            <View style={styles.container}>
            {
                this.props.hatchStore.profitList.length === 0 ?
                <View style={{
                    display:'flex',
                    justifyContent:'flex-start',
                    alignContent:'center',
                    alignItems:'center',
                    height: '100%'
                }}>
                    <Image source={require('../assets/images/kong.png')} style={{width:400 ,height: 400}}></Image>
                </View>
                :
                <FlatList
                    data={this.props.hatchStore.profitList}
                    keyExtractor={(item, index) => index.toString()}
                    onEndReached={this._onEndReached}
                    renderItem={({item}) => <ListItem data={item}></ListItem>}
                />
            }
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        padding: 10
    },
    c1:{
        fontSize: 14,
        color:'#B9B6B6'
    },
    c2:{
        fontSize: 14,
        color:'#FF7F4B'
    },
    label:{
        marginRight: 10
    },
    timeBox:{
        paddingLeft: 30,
        borderLeftColor: '#B9B6B6',
        borderLeftWidth: 1,
    },
    item:{
        padding: 10,
        paddingTop: 15,
        display: 'flex',
        flexDirection:'row',
        borderBottomColor: '#B9B6B6',
        borderBottomWidth: 1,
        justifyContent:'space-between'
    }
});
export default ProfitRecordScreen;